<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html, body { height: 100%; margin: 0; padding: 0;}
    .container {
        display: grid;
        height: 100%;
        /* grid-template-rows 和 grid-template-columns 使用 repeat 函数设置行列 */
        grid-template-columns: repeat(2, 100px) 1fr 2fr; /* 前两列宽度 100px，第三列占剩下1/3，第四列占2/3 */
        grid-template-rows: repeat(2, 100px) 1fr 2fr; /* 前两行高度 100px，第三行占剩下1/3，第四行占2/3 */
    }

    .item {
        border: 1px solid red;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="item item-01">1</div>
  <div class="item item-02">2</div>
  <div class="item item-03">3</div>
  <div class="item">4</div>
  <div class="item item-05">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item item-10">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
</div>
</body>
</html>